<template>
  <div class="container" :style="'height: ' + docheight + 'px'">
    <leftcont></leftcont>
    <div class="righCont">
      <topcont></topcont>
      <div class="content">
        <div class="mainCont">
          <div class="mainTop">
            <div class="mainTitle">基本详情</div>
            <btn value="禁用该用户" @click="backfn"></btn>
          </div>
          <div class="userInfo">
            <div class="userLeft">
              <div class="userImg">
                <img :src="detailInfo.technician_head_img + ossSrc" />
                <div class="sexTag">
                  <span
                    v-if="detailInfo.technician_sex == 1"
                    class="iconfont icon-nan"
                  ></span>
                  <span
                    v-if="detailInfo.technician_sex == 2"
                    class="iconfont icon-nv"
                  ></span>
                  <span>{{ detailInfo.age }}</span>
                </div>
              </div>
            </div>
            <div class="userRight">
              <div class="userRightInfo">
                <div class="infoItem">
                  <div class="infoName">用户昵称:</div>
                  <div class="infoVal">
                    {{ detailInfo.technician_nick_name }}
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">真实姓名:</div>
                  <div class="infoVal">{{ detailInfo.technician_name }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">账号状态:</div>
                  <div class="infoVal">
                    <span
                      class="greenBtn"
                      v-if="detailInfo.technician_status == 1"
                      >正常</span
                    >
                    <span
                      class="redBtn"
                      v-if="detailInfo.technician_status == 2"
                      >禁用</span
                    >
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">服务状态:</div>
                  <div class="infoVal">
                    <span class="greenBtn" v-if="detailInfo.service_status == 1"
                      >可服务</span
                    >
                    <span class="blueBtn" v-if="detailInfo.service_status == 2"
                      >服务中</span
                    >
                    <span class="redBtn" v-if="detailInfo.service_status == 3"
                      >休息中</span
                    >
                  </div>
                </div>
                <div class="infoItem">
                  <div class="infoName">粉丝量:</div>
                  <div class="infoVal">{{ detailInfo.collect_num }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">评分:</div>
                  <div class="infoVal">{{ detailInfo.technician_score }}</div>
                </div>
                <div class="infoItem" v-if="false">
                  <div class="infoName">保证金:</div>
                  <div class="infoVal">{{ detailInfo.earnest_money }}</div>
                </div>
                <div class="infoItem" v-if="false">
                  <div class="infoName">提现金额:</div>
                  <div class="infoVal"></div>
                </div>
                <div class="infoItem">
                  <div class="infoName">取消订单:</div>
                  <div class="infoVal">{{ detailInfo.qx_cs }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">身份证号:</div>
                  <div class="infoVal">{{ detailInfo.technician_idcard }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">联系电话:</div>
                  <div class="infoVal">{{ detailInfo.technician_mobile }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">微信号:</div>
                  <div class="infoVal">{{ detailInfo.technician_wechat }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">创建时间:</div>
                  <div class="infoVal">{{ detailInfo.create_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">修改时间:</div>
                  <div class="infoVal">{{ detailInfo.update_time }}</div>
                </div>
                <div class="infoItem">
                  <div class="infoName">技师描述:</div>
                  <div class="infoVal">
                    {{ detailInfo.technician_introduce }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="payTable">
            <div class="trendTop">订单记录({{ total }})</div>
            <div class="tableCont">
              <el-table :data="tableData" style="width: 100%">
                <el-table-column
                  prop="bill_number"
                  show-overflow-tooltip
                  label="订单编号"
                >
                </el-table-column>
                <el-table-column prop="bill_name" label="订单名称">
                </el-table-column>
                <el-table-column label="变更类型" v-if="false">
                  <template slot-scope="scope">
                    <div class="greenBtn" v-if="scope.row.bill_type == 1">
                      项目提成
                    </div>
                    <div class="greenBtn" v-if="scope.row.bill_type == 2">
                      好评奖金
                    </div>
                    <div
                      class="redBtn"
                      v-if="
                        scope.row.bill_type == 3 &&
                          scope.row.bill_name == '提现申请'
                      "
                    >
                      {{ scope.row.bill_name }}
                    </div>
                    <div
                      class="blueBtn"
                      v-if="
                        scope.row.bill_type == 3 &&
                          scope.row.bill_name == '提现驳回'
                      "
                    >
                      {{ scope.row.bill_name }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="bill_money"
                  v-if="false"
                  label="变更金额"
                >
                  <template slot-scope="scope">
                    <div class="greenBtn" v-if="scope.row.bill_type == 1">
                      +{{ scope.row.bill_money }}
                    </div>
                    <div class="greenBtn" v-if="scope.row.bill_type == 2">
                      +{{ scope.row.bill_money }}
                    </div>
                    <div
                      class="redBtn"
                      v-if="
                        scope.row.bill_type == 3 &&
                          scope.row.bill_name == '提现申请'
                      "
                    >
                      -{{ scope.row.bill_money }}
                    </div>
                    <div
                      class="blueBtn"
                      v-if="
                        scope.row.bill_type == 3 &&
                          scope.row.bill_name == '提现驳回'
                      "
                    >
                      +{{ scope.row.bill_money }}
                    </div>
                  </template>
                </el-table-column>
                <el-table-column
                  v-if="false"
                  prop="after_change_balance"
                  label="账户金额"
                >
                </el-table-column>
                <el-table-column prop="create_time" label="完成时间">
                </el-table-column>
              </el-table>
              <div class="pageCont">
                <el-pagination
                  background
                  layout="prev, pager, next"
                  :page-size="per_page"
                  :current-page="page"
                  @current-change="pageFn"
                  :total="total"
                >
                </el-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import leftcont from "@/components/leftCont.vue";
import topcont from "@/components/topCont.vue";
import btn from "@/components/public/btn.vue";

import { fundDetails, editShowTech } from "@/http/api";

export default {
  components: { leftcont, topcont, btn },
  data() {
    return {
      detailInfo: {},
      page: 1,
      per_page: 5,
      total: 0,
      tableData: []
    };
  },
  props: {},
  methods: {
    pageFn(index) {
      this.page = index;
      this.getTechMoney();
    },
    serchFn() {
      this.page = 1;
      this.total = 0;
      this.getOrder();
    },
    backfn() {
      this.$router.back();
    },
    getdata() {
      var data = {
        technician_id: this.$route.query.id
      };
      editShowTech(data)
        .then(res => {
          if (res.data.code == 1) {
            this.detailInfo = res.data.data;
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(err => {
          this.$message("服务器请求超时");
        });
    },
    getTechMoney() {
      var data = {
        technician_id: this.$route.query.id,
        page: this.page,
        per_page: this.per_page
      };
      fundDetails(data)
        .then(res => {
          if (res.data.code == 1) {
            this.tableData = res.data.data.data;
            this.total = res.data.data.total;
          } else {
            this.$message(res.data.msg);
          }
        })
        .catch(err => {
          this.$message("服务器请求超时");
        });
    }
  },
  mounted() {},
  created() {
    this.getTechMoney();
    this.getdata();
  }
};
</script>

<style scoped lang="less">
.container {
  width: 100%;
  display: flex;
  overflow: hidden;
  .righCont {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-left: 15px;
    height: 100%;
    width: 10px;
    background-color: #f4f8ff;
    .content {
      padding: 20px;
      box-sizing: border-box;
      width: 100%;
      flex: 1;
      overflow: auto;
      .mainCont {
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
        background-color: #fff;
        .redBtn {
          color: #f56c6c;
        }
        .greenBtn {
          color: #85ce61;
        }
        .blueBtn {
          color: #96a1fe;
        }
        .blackBtn {
          color: #666;
        }
        .mainTop {
          display: flex;
          margin-bottom: 25px;
          align-items: center;
          justify-content: space-between;
          .mainTitle {
            font-size: 16px;
            font-weight: bold;
          }
        }
        .userInfo {
          width: 100%;
          padding: 30px;
          display: flex;
          background-color: #eff2fe;
          box-sizing: border-box;
          align-content: center;
          .userLeft {
            .userImg {
              width: 120px;
              height: 120px;
              padding: 4px;
              border-radius: 50%;
              background-color: #4fc763;
              position: relative;
              .sexTag {
                position: absolute;
                bottom: 0;
                right: 0;
                height: 30px;
                width: 60px;
                line-height: 30px;
                text-align: center;
                font-size: 12px;
                background-color: #4fc763;
                color: white;
                border-radius: 15px;
              }
              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }
          }
          .userRight {
            width: 200px;
            flex: 1;
            box-sizing: border-box;
            padding: 15px;
            .userRightHead {
              width: 80px;
              text-align: right;
              font-size: 15px;
              font-weight: bold;
            }
            .lifeImg {
              display: flex;
              flex-wrap: wrap;
              padding-left: 95px;
              margin-top: 20px;
              box-sizing: border-box;
              img {
                height: 200px;
                margin-bottom: 20px;
                margin-right: 10px;
              }
            }
            .hasMargin {
              margin-top: 30px;
            }
            .desInfo {
              padding-left: 95px;
              box-sizing: border-box;
              margin-top: 20px;
            }
            .userRightInfo {
              width: 100%;
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              .infoItem {
                width: 48%;
                margin: 10px 0px;
                display: flex;
                line-height: 20px;
                font-size: 14px;
                .infoName {
                  width: 80px;
                  text-align: right;
                  margin-right: 15px;
                  color: #999;
                }
              }
            }
          }
        }
        .payTable {
          margin-top: 20px;
          width: 100%;
          background-color: #fff;
          padding: 15px;
          box-sizing: border-box;
          .trendTop {
            font-weight: bold;
            font-size: 16px;
            cursor: pointer;
          }
          .tableSerchCont {
            width: 100%;
            display: flex;
            justify-content: flex-end;
            margin-bottom: 10px;
            .serchItem {
              width: 150px;
              margin-left: 10px;
            }
          }
          .tableCont {
            width: 100%;
            margin-top: 15px;
            .tableSerchCont {
              width: 100%;
              display: flex;
              justify-content: flex-end;
              margin-bottom: 10px;
              .serchItem {
                width: 150px;
                margin-left: 10px;
              }
              .timeItem {
                margin-left: 10px;
              }
            }
            .ctrolBtn {
              display: flex;
              .text_btn {
                margin: 0 5px;
                cursor: pointer;
                font-size: 14px;
              }
              .redBtn {
                color: #f56c6c;
              }
              .blueBtn {
                color: #96a1fe;
              }
              .greenBtn {
                color: #85ce61;
              }
            }
            .pageCont {
              padding: 30px 0;
              display: flex;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
</style>
